<template>
  <div class="earnings">
      <topTitle title="数据"/>
      <section class="total-box">
          <div class="title-box">
              <div class="item">当前价格</div>
              <div class="item">初始价格</div>
              <div class="item">最高价格</div>
              <div class="item">最低价格</div>
          </div>
          <div class="content-box">
              <div class="item">{{ incomeData.currentWorth || 0 }} 趣宝石/小时</div>
              <div class="item">{{ incomeData.firstWorth || 0 }} 趣宝石/小时</div>
              <div class="item">{{ incomeData.maxWorth || 0 }} 趣宝石/小时</div>
              <div class="item">{{ incomeData.lowWorth || 0 }} 趣宝石/小时</div>
          </div>
      </section>
      <topTitle title="价格时长"/>
      <el-date-picker
        v-model="date"
        :clearable="false"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="dateChange">
    </el-date-picker>
      <section id="echarts" v-if="!noData"></section>
      <div v-else class="no-data">暂无数据</div>
      <div>平均收益：{{ accountIncome }} 元</div>
      <el-table :data="income" border style="width: 100%; margin: 20px 0;">
          <el-table-column prop="ymd" label="日期"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="minutes" label="出租时长"></el-table-column>
          <el-table-column prop="accountIncome" label="收入（70%）"></el-table-column>
          <el-table-column prop="platformIncome" label="平台收益（30%）"></el-table-column>
      </el-table>
  </div>
</template>
<script>
import echarts from 'echarts'
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            incomeData: {},
            analysisData: [],
            income: [],
            accountIncome: null,
            noData: false,
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < new Date('2020-08-07 00:00:00').getTime()
                },
                shortcuts: [
                    {
                        text: '最近7天',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近30天',
                        onClick (picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            end.setTime(end.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', [start, end])
                        }
                    }
                ]
            },
            date: [Date.now() - 3600 * 1000 * 24 * 7, Date.now()],
            fromDate: formatDate(Date.now() - 3600 * 1000 * 24 * 7, 'YYYY-MM-DD HH:MM:SS'),
            endDate: formatDate(Date.now(), 'YYYY-MM-DD HH:MM:SS'),
            userId: '',
            dataId: '',
            accountNo: ''
        }
    },
    mounted () {
        const { userId, dataId, accountNo } = this.$route.query
        this.userId = userId
        this.dataId = dataId
        this.accountNo = accountNo
        this.getDetailChange()
        this.getAccountIncome()
        this.creatEcharts()
    },
    methods: {
      getAccountIncome () {
          this.$http.get('/peace/selectAccountIncome', {
            params: {
                userId: this.userId,
                dataId: this.dataId,
                accountNo: this.accountNo,
                endDate: this.endDate,
                fromDate: this.fromDate,
                pageNum: 1,
                pageSize: 99999
            }
          }).then(res => {
              if (res.code === '0') {
                  this.accountIncome = res.data.accountIncome
                  this.income = res.data.accountIncomeVoList
              } else {
                  this.$message({
                      type: 'error',
                      message: '系统异常，请稍后再试'
                  })
              }
          })
      },
      // 查看收益曲线
      getDetailChange () {
          this.$http.get('/peace/selectAccountIncomeDetailChange', {
            params: {
                userId: this.userId,
                dataId: this.dataId,
                accountNo: this.accountNo,
                endDate: this.endDate,
                fromDate: this.fromDate,
                pageNum: 1,
                pageSize: 99999
            }
          }).then(res => {
            if (res.code === '0') {
                if (res.data.accountIncomeChangeDetailEntryVoList.length > 0) {
                    this.incomeData = res.data
                    this.analysisData = res.data.accountIncomeChangeDetailEntryVoList
                    this.$nextTick(() => {
                        this.setEcharts()
                    })
                    this.noData = false
                } else {
                    this.noData = true
                }
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
                this.noData = true
            }
          })
      },
      setXaxis (analysisData) {
          let xArr = []
          let series = []
          analysisData.forEach(item => {
              xArr.push(item.date)
              series.push(item.worth)
          })
          return { xArr, series }
      },
      setEcharts () {
            let { xArr, series } = this.setXaxis(this.analysisData)
            console.log(xArr, series)
            let myChart = echarts.init(document.getElementById('echarts'))
            let option = {
                xAxis: {
                    data: xArr
                },
                series: {
                  name: '价格时长',
                  type: 'line',
                  data: series
                }
            }
            myChart.setOption(option)
      },
      creatEcharts () {
        let myChart = echarts.init(document.getElementById('echarts'))
        let option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['价格时长'],
                type: 'scroll'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: []
        }
        myChart.setOption(option)
      },
      // 日期切换
      dateChange (val) {
        this.fromDate = formatDate(new Date(val[0]), 'YYYY-MM-DD') + ' 00:00:00'
        this.endDate = formatDate(new Date(val[1]), 'YYYY-MM-DD') + ' 23:59:59'
        this.getDetailChange()
        this.getAccountIncome()
      }
    }
}
</script>
<style lang="scss" scoped>
.earnings{
  #echarts {
      height: 400px;
      margin-top: 20px;
  }
  .no-data{
    padding: 50px 0;
    text-align: center;
    color: #999999;
  }
}
</style>
